<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<title>系统请求列表</title>
<head th:replace="common/incHead :: incHead"></head>
<body class="gray-bg">
<div class="ok-body">
    <div class="layui-row ljLayTableBox">
        <table class="layui-hide" id="indexTable" lay-filter="indexTable"></table>
    </div>
</div>
<div th:replace="common/incBottom :: incBottom"></div>
<!-- 初始化表格数据 -->
<script th:inline="javascript">
    /*<![CDATA[*/
    let indexData = [];
    /*[# th:each="item,itemStat:${reqList}"]*/
    indexData.push({
        id: [[${itemStat.index}]],
        resUrl: [[${item}]],
        resLimit: [[${@lj.camelCaseString(item)}]],
        resType: 0,
        upId: '',
        resName: '',
        resSort: ''
    });
    /*[/]*/
    /*]]>*/
</script>
<script th:inline="none">
    layui.use(["jquery", "table", "form", "okLayer", "okPapper", "okUtils"], function () {
        let table = layui.table;
        let okPapper = layui.okPapper;
        let $ = layui.jquery;
        let form = layui.form;
        let okUtils = layui.okUtils;
        let config = okUtils.local("okConfig") || okConfig || {};
        okLoading.close($);
        let tableData;
        table.render({
            id: 'indexTable',
            elem: '#indexTable',
            height: 'full-70',
            page: false,
            data: indexData,
            limit: indexData.length,
            defaultToolbar: [],
            toolbar: false,
            toolbar: "#toolbarTpl",
            even: true,
            size: "",
            cols: [[
                {field: "id", type: 'numbers', title: "编号", width: 60},
                {field: "id", type: 'checkbox', width: 60},
                {field: "resUrl", title: "请求地址", width: 250},
                {field: "resLimit", title: "扩展权限", width: 250},
                {field: "resType", title: "资源类型", width: 100, templet: '#switchTpl'},
                {field: "upId", title: "父资源编号", width: 100, edit: 'text'},
                {field: "resName", title: "资源名称", width: 100, edit: 'text'},
                {field: "resSort", title: "资源排序", width: 100, edit: 'text'},
                {field: "result", title: "操作结果", align: "center", fixed: "right"}
            ]],
            done: function (res, curr, count) {
                tableData = res.data;
            }
        });
        //头工具栏事件
        table.on('toolbar(indexTable)', function (obj) {
            //获取选中行状态
            console.log(obj);
            let checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            let selectData = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    selectData.forEach(function (item, index) {
                        let tr = $(".layui-table-box tbody tr[data-index='" + item.id + "']");
                        let td = tr.find("td[data-field='result']");
                        td.html("匹配中...");
                        $.ajax({
                            url: "/request/mapping/add", type: 'post', cache: false, data: {
                                upId: item.upId,
                                resUrl: item.resUrl,
                                resLimit: item.resLimit,
                                resType: item.resType,
                                resName: item.resName,
                                resSort: item.resSort
                            }, timeout: 1000 * 20, success: function (data) {
                                console.log(data);
                                if ("200" === data.statusCode) {
                                    tr.remove();
                                } else {
                                    td.html(data.message);
                                }
                            }, error: function (xhr) {
                                td.html("请求页面异常:" + xhr.status);
                            }
                        });
                    });
                    break;
                case 'reload':
                    window.location.reload();
                    break;
            }
        });
        //监听类型操作
        form.on('switch(resTypeSwitch)', function (obj) {
            let index = obj.othis.parents("tr").attr("data-index");
            if (obj.elem.checked) {
                tableData[index].resType = 1;
            } else {
                tableData[index].resType = 0;
            }
        });
        okPapper.init();
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>批量匹配资源</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal pull-right" style="margin-right: -120px;" lay-event="reload"><i class="layui-icon layui-icon-search"></i>刷新页面</button>
    </div>
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="resType" value="0" lay-skin="switch" lay-text="菜单|页面" lay-filter="resTypeSwitch" }>
</script>
</body>
</html>